﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowMap.aspx.cs" MasterPageFile="~/Rippoll.Master" Inherits="RipPoll.Web.ShowMap" %>

   <asp:Content ID="Content1" ContentPlaceHolderID="rippollMainBody" runat="server">
   
       <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 80%; width:100%;}
   </style>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">

    var Type;
    var Url;
    var Data;
    var ContentType;
    var DataType;
    var ProcessData;

    
    $(document).ready(
        function() {
            WCFJSON();
        }
    );


    function WCFJSON() {
        var pollid = "6";
        Type = "POST";    
        Url = "PollServices.svc/GetZipCodesForPollid";
        Data = '{"PollId":"' + pollid + '"}';
        ContentType = "application/json; charset=utf-8";
        DataType = "json"; varProcessData = true; 
        CallService();
    }


    function CallService() {
        $.ajax({            
            type: Type, //GET or POST or PUT or DELETE verb
            url: Url, // Location of the service
            data: Data, //Data sent to server
            contentType: ContentType, // content type sent to server
            dataType: DataType, //Expected data format from server
            processdata: ProcessData, //True or False            
            success: function (msg) {//On Successfull service call                
                ServiceSucceeded(msg);
            },
            error: ServiceFailed // When Service call fails
        });
    }

    function ServiceFailed(result) {
        alert('Service call failed: ' + result.status + ' ' + result.statusText);
        Type = null;
        varUrl = null;
        Data = null; 
        ContentType = null;
        DataType = null;
        ProcessData = null;
    }

    function ServiceSucceeded(result) {
    
        if (DataType == "json") {
            resultObject = result.d;                
//            for (i = 0; i < resultObject.length; i++) {
//                alert(resultObject[i]);
//            }
            Loadmap(resultObject);
        }
        
    }

//    function ServiceFailed(xhr) {
//        alert('failed : ' + xhr.responseText);
//        if (xhr.responseText) {
//            var err = xhr.responseText;
//            if (err)
//                error(err);
//            else
//                error({ Message: "Unknown server error." })
//        }    
//        return;
//    }

        var geocoder;
        var map;
        var image = "images/pushpin.png";
              
        function Loadmap(ziparr) {    
            //alert('Inside Loadmap');        
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(38.898243, -94.704936);            
            var myOptions = {
                zoom: 4,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
                //disableDefaultUI: false,
                //disableDoubleClickZoom: true,
                //draggable: false
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//            geocoder.geocode({ 'address': 'US' }, function (results, status) {
//                var ne = results[0].geometry.viewport.getNorthEast();
//                var sw = results[0].geometry.viewport.getSouthWest();

//                map.fitBounds(results[0].geometry.viewport);
//            }); 
           

            //alert('map loaded');
            
            //alert('Loading zips');
            for (var i = 0; i < ziparr.length; i++) {
                address = ziparr[i];
                DisplayPin(address);
            }


            google.maps.event.trigger(map, "resize");
            //HidePin("66215");

            //map.setCenter(new GLatLng(37.4419, -122.1419), 4);
//            latlng = new google.maps.LatLng(38.898243, -94.704936);
//            map.setSenter(latlng);

            //map.setCenter(new GLatLng(38.6, -98));
            
        }

        function DisplayPin(address)
        {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: address,
                        icon: image
                    });
                }
            });
        }


        function HidePin(address) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: address,
                        icon: image
                    });
                    marker.hide();
                }
            });
        }

    </script>
     
     
         <table style="width:800px;height:600px; padding-left:25px;">
            <tr>
                <td  style="width:800px; height:500px; vertical-align:top" colspan="2">
                    <div id="map_canvas" style="width:750px; height:500px; vertical-align:top" ></div>
                </td>
            </tr>
            <tr>
                <td style="width:400px">
                    <div id="columnLeft"><img src="images/results.jpg" width="391" height="39"  alt="rippoll.com" />
                        <table border="0" cellspacing="5" cellpadding="0">
                          <tr>
                            <td width="231" rowspan="4"><img src="../images/pie_chart.jpg" width="250" height="171"  alt="rippoll.com" /></td>
                            <td width="146" height="39" align="center" bgcolor="#2CC52C" class="voteTalley">000</td>
                          </tr>
                          <tr>
                            <td height="39" align="center" bgcolor="#3399FE" class="voteTalley">000</td>
                          </tr>

                          <tr>
                            <td height="39" align="center" bgcolor="#9A33CC" class="voteTalley">000</td>
                          </tr>
                          <tr>
                            <td height="39" align="center" bgcolor="#FF3366" class="voteTalley">000</td>
                          </tr>
                        </table>
                        <img src="images/preview_box_ad_space.jpg" width="385" height="137" alt="rippoll.com" /><br />
                    </div>
                </td>
                <td style="width:400px">
                    <div id="columnRight">
                        <div id="followedBy"><span class="followedby">followed by</span> <img src="images/friend_image_placeholder.jpg" width="30" height="30" class="friend" alt="rippoll.com" /><img src="../images/arrow_rt.png" width="24" height="24" class="arrow"  alt="rippoll.com" /></div>
                        <div id="commentBox"> <img src="images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" /><span class="commentName">Friend X </span><span class="commentDate">March 14 wrote:</span><span class="comment"><br />
                            <br />
                        Comment text.</span></div>
                        <div id="commentBox"> <img src="images/friend_image_placeholder.jpg"  alt="rippoll.com" width="60" height="60" class="commentImageLeft" /><span class="commentName">Friend X </span><span class="commentDate">March 14 wrote:</span><span class="comment"><br />
                          <br />
                          Comment text.</span></div>  
                          <div id="commentBox"> <img src="images/friend_image_placeholder.jpg" alt="rippoll.com" width="60" height="60" class="commentImageLeft" /><span class="commentName">Friend X </span><span class="commentDate">March 14 wrote:</span><span class="comment"><br />
                              <br />
                        Comment text.</span></div>  
                          <div id="commentBox"> <img src="images/friend_image_placeholder.jpg" alt="rippoll.com" width="60" height="60" class="commentImageLeft" /><span class="commentName">Friend X </span><span class="commentDate">March 14 wrote:</span><span class="comment"><br />
                              <br />
                        Comment text.</span></div>  
                          <div id="commentBox"> <img src="images/friend_image_placeholder.jpg" alt="rippoll.com" width="60" height="60" class="commentImageLeft" /><span class="commentName">Friend X </span><span class="commentDate">March 14 wrote:</span><span class="comment"><br />
                              <br />
                           Comment text.</span></div>
                    </div>              
                </td>
            </tr>
         </table>

    
</asp:Content>